<template>
  <div>
    <div class="tree">
      <div v-for="(treeNode,index) in treeRootArray" :key="index">
        <oolong-tree :tree-node="treeNode"
                     :useCheckBox="true"
                     :checkBoxDisabled="false"
                     :showOperators="true"
                     :showEditorOperator="false"
                     :showRemoveOperator="true"
                     :showAddBrotherOperator="false"
                     :showAddChildOperator="false"
                     :isDraggable="true"
                     :draggableMode="'ALL'"
                     :nodeDoubleClick="true"
                     @updateCheckBox="updateCheckBox"
                     @showNodeDetail="showTreeNodeDetail"
                     @addChildNode="addTreeChildNode"
                     @editorNode="editorTreeNode"
                     @addBrotherNode="addTreeBrotherNode"
                     @removeNode="removeTreeNode"
                     @handleDrop="handleTreeDrop"
                     ref="tree"></oolong-tree>
      </div>
    </div>
    <br/>
    <div class="wordShow">
      <p>数据格式：{{ treeRootArray }}</p>
    </div>
    <br/>
    <div class="wordShow">
      <p>保存id：{{ idsArray }}</p>
    </div>
  </div>
</template>

<script>
import {initData, rebuildData, updateData} from '../components/menu-tree/treeNode'
import oolongTree from '../components/menu-tree'

export default {
  name: 'tree',
  components: {
    oolongTree
  },
  data() {
    return {
      // 未包装数据
      treeArray: [
        {
          'id': 12,
          'pid': 0,
          'name': '账户管理',
          'url': 'www',
          'menuChild': [
            {
              'id': 22,
              'pid': 12,
              'name': '密码管理',
              'url': 'www',
              'menuChild': [
                {
                  'id': 325,
                  'pid': 22,
                  'name': '密码重置',
                  'url': 'www',
                  'menuChild': []
                }, {
                  'id': 326,
                  'pid': 22,
                  'name': '密码查看',
                  'url': 'www',
                  'menuChild': []
                }
              ]
            }
          ]
        },
        {
          'id': 3,
          'pid': 0,
          'name': '中心管理',
          'url': 'www',
          'menuChild': [
            {
              'id': 4,
              'pid': 3,
              'name': '客户档案',
              'url': 'www',
              'menuChild': [
                {
                  'id': 43,
                  'pid': 4,
                  'name': '儿童档案',
                  'url': 'www',
                  'menuChild': []
                }, {
                  'id': 45,
                  'pid': 4,
                  'name': '成人档案',
                  'url': 'www',
                  'menuChild': []
                }
              ]
            }
          ]
        }
      ],
      treeRootArray: [],
      // 选中节点
      idsArray: [12, 3, 22, 4, 325, 45]
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let initTreeData = initData(this.treeArray, this.idsArray, true);
      for (let l = 0; l < initTreeData.length; l++) {
        this.treeRootArray.push(initTreeData[l]);
      }
    },
    // 用于拖拽后更新数据
    rebuildAllCheckBox() {
      console.log('idsArray::' + this.idsArray);
      let resultObj = rebuildData(this.treeRootArray, this.idsArray);
      console.log('idsArray::' + this.idsArray);
      this.treeArray = [];
      for (let l = 0; l < resultObj.treeRootArray.length; l++) {
        this.treeArray.push(resultObj.treeRootArray[l]);
      }
      this.idsArray = resultObj.idsArray;
    },
    showTreeNodeDetail(node) {
      alert('showTreeNodeDetail:' + JSON.stringify(node));
    },
    // 点击checkbox后更新
    updateCheckBox(node) {
      let resultObj = updateData(this.treeRootArray, this.idsArray, node);
      this.treeArray = [];
      for (let l = 0; l < resultObj.treeRootArray.length; l++) {
        this.treeArray.push(resultObj.treeRootArray[l]);
      }
      this.idsArray = resultObj.idsArray;
    },
    // 新增子节点
    addTreeChildNode(node) {
      alert('addTreeChildNode:' + JSON.stringify(node));
      this.updateTreeNode(node);
    },
    // 添加兄弟节点
    addTreeBrotherNode(node) {
      alert('addTreeBrotherNode:' + JSON.stringify(node));
      this.updateTreeNode(node);
    },
    // 拖拽功能
    handleTreeDrop(node) {
      alert('handleTreeDrop:' + JSON.stringify(node));
      this.rebuildAllCheckBox();
      this.updateTreeNode(node);
    },
    // 编辑节点
    editorTreeNode(node) {
      alert('editorTreeNode:' + JSON.stringify(node));
      this.updateTreeNode(node);
    },
    removeTreeNode(node) {
      alert('removeTreeNode:' + JSON.stringify(node));
      this.updateTreeNode(node);
    },
    // 保存修改的菜单信息
    updateTreeNode(node) {
      alert('updateTreeNode:' + JSON.stringify(node));
    }
  },
  watch: {
    // 监控treeArray 更新视图
    treeArray(val) {
      // alert("watch");
      this.treeRootArray = [];
      this.$nextTick(() => {
        this.treeRootArray = val;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.wordShow {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;

  p {
    padding: 5px 10px
  }
}

.tree {
  background-color: #fff;
}
</style>
